<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="(item,index) in showGoodsDetail[0].goods_pic" :key="index">
				<view class="swiper-item">
					<image :src="item.pics_url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goodsInfo">
			<view class="price">￥{{showGoodsDetail[0].goods_price}}</view>
			<view class="flag">[24期分期免息；领卷至高立减50元]</view>
			<view class="goodsName">￥{{showGoodsDetail[0].goods_name}}</view>
			<view class="intru">
				<view class="intrInfo" v-for="(item,index) in showGoodsDetail[0].goods_introduce" :key="index" >
					{{index}}{{item}}
				</view>
			</view>
		<view class="line"></view>
		<uni-detail-tab :tabList="tabList">
			<view slot="left">
				<image :src="item" mode="widthFix" v-for="(item,index) in showGoodsDetail[0].goods_pic_info" :key="index" class="pic"></image>
			</view>
			<view slot="right">
				<image :src="item" mode="widthFix" v-for="(item,index) in showGoodsDetail[0].goods_pic_info" :key="index" class="pic"></image>
			</view>
		</uni-detail-tab>
		<view class="bottom">
			<view class="left">
				<view class="storeIcon">店铺</view> 
				<navigator class="shopIcon" open-type="switchTab" url="../shopcar/shopcar">购物车</navigator>
			</view>
			<view class="right">
				<view class="addShop" @click="handleAddShop">加入购物车</view>
				<view class="quickBuy" @click="handleBuy">立即购买</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {goodsDetail} from "../../static/js/goodsDetail.js"
	export default {
		data() {
			return {
				goodsDetail:[],
				showGoodsDetail:[],
				tabList:["商品介绍","规格参数"],
				shopList:[],
				goods_id:0,
				loginInfo:""
			}
		},
		onLoad(option) {
			this.showGoodsDetail = goodsDetail.filter(v=>v.goods_id == option.goods_id)
			this.goods_id = option.goods_id
		},
		created() {
			this.goodsDetail = goodsDetail
			if(uni.getStorageSync("shopList")){
				this.shopList = uni.getStorageSync("shopList")
			}
			if(uni.getStorageSync("loginInfo")){
				this.loginInfo = uni.getStorageSync("loginInfo")
			}else{
				this.loginInfo = []
			}
		},
		methods: {
			handleBuy(){
				uni.setStorageSync("buyList",this.showGoodsDetail)
				uni.showLoading({
					title:"购买中。。。",
					mask:true
				})
				setTimeout(()=>{
					uni.hideLoading()
					uni.navigateTo({
						url:"../buyPage/buyPage"
					})
				},1500)
				
			},
			handleAddShop(){ 
				console.log(this.loginInfo.length)
				if(this.loginInfo.length){
					let shopList = this.shopList
					let showList = this.showGoodsDetail
					let index = 0
					let state = false
					this.shopList.forEach((v,i)=>{
						if(v.goods_id == this.goods_id){
							if(v.loginInfo ==this.loginInfo){
								index = i
								state = true
							}
							
						}
					})
					if(state){
						this.shopList[index].goods_num +=1
					}else{
						showList[0].loginInfo = this.loginInfo
						this.shopList.push(...showList)
					}
					uni.setStorageSync("shopList",shopList)
					uni.showToast({
						title:"加入成功"
					})
				}else{
					uni.showToast({
						title:"请登录",
						icon:"error"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"../login/login"
						})
					},1000)
				}
				
			}
		}
	}
</script>

<style>
	.line{
		height: 16rpx;
		background-color: #efefef;
	}
	.swiper{
		width: 100%;
		height: 600rpx;
	}
	.swiper .swiper-item image{
		width: 100%;
	}
	.goodsInfo{
		padding: 10rpx 30rpx;
	}
	.price{
		font-size: 46rpx;
		color: red;
		padding: 20rpx 0;
	}
	.flag{
	line-height: 80rpx;
	font-size: 24rpx;
	color: #ff6900;
	background-color: rgba(255,105,0,0.1);
	}
	.goodsName{
		font-size: 36rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}
	.intru{
		font-size: 24rpx;
	}
	.pic{
		width: 100%;
	}
	.bottom{
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: sticky;
		bottom: 0;
		z-index: 999!important;
		display: flex;
	}
	.left{
		flex: 3;
		display: flex;
	}
	.storeIcon,.shopIcon{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right{
		flex: 5;
		display: flex;
	}
	.addShop,.quickBuy{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white ;
	}
	.addShop{
		background-color: orange;
	}
	.quickBuy{
		background-color: red;
	}
</style>
